<template>
    <div class="container">
      <div id="mapContent" ref="mapContent"></div>
      <!--左侧时光机专题-->
      <div class="timeBlock" >
        <div class="timeBlock_top" >
            <div class="diss_left" ></div>
            <div class="diss_right" ></div>
        </div>
        <div class="timeBlock-content">
            <img
                src="@/assets/multiTime/doubleRectangle.svg"
                alt=""
                class="content_img"
            />
            <div class="content_title" >时光机专题</div>
        </div>
        <div class="timeBlock-bottom"></div>
        <div class="timeBlock_body" >
            <!-- <div style="height: 1000px;" ></div> -->
             <timeList></timeList>
        </div>
      </div>
      <!--返回-->
      <div class="back" title="返回" @click="backMap" >
        <el-icon><Back /></el-icon>
        <span>返回</span>
      </div>
      <!--下部时光轴-->
      <tap></tap>
    </div>
  </template>
  
  <script setup>

  import { ref, onMounted, computed, onBeforeUnmount, watch } from "vue";
  import { useRouter, useRoute } from 'vue-router';
  import timeList from "./components/timeList.vue";
  import tap from "./components/tap.vue";

  const router = useRouter();
  const mapContent = ref(null);
//   const Shouqi = ref(false);
//   const headerShowSatatus = computed(() => headerStore.headerShowSatatus);
  
  
  onMounted(() => {
    // 初始化球体
    initGlobe();
  });
  
  const initGlobe = () => {
  // 创建 Viewer 实例
  window.viewer = new SuperMap3D.Viewer(mapContent.value, {
    terrainProvider: new SuperMap3D.SuperMapTerrainProvider({
      url: "https://hunan.tianditu.gov.cn/iserver/services/3D-mongodb-Hunanastergdem30mDEM/rest/realspace/datas/DEM",
      isSct: true, // 地形服务源自SuperMap iServer发布时需设置isSct为true
      invisibility: true,
    }),
    contextOptions: {
      contextType: 2, // Webgl2:2 ; WebGPU:3
    },
    navigation: false,
  });
  // 添加基础拖放功能
  viewer.extend(SuperMap3D.viewerDragDropMixin);

  viewer.scenePromise.then((scene) => {
    init(SuperMap3D, scene, viewer);
    // window.viewer.scene.camera.changed.addEventListener(() => {
    //   // 相机任何变化时的处理逻辑
    //   const heading = window.viewer.camera.heading;
    //   rotateValue.value = heading * (180 / 3.1415927);
    // });
  });
    };

    const init = (SuperMap3D, scene, viewer) => {
    // 添加图层
    // viewer.resolutionScale = window.devicePixelRatio;
    viewer.imageryLayers.addImageryProvider(
        new SuperMap3D.WebMapTileServiceImageryProvider({
        url: "http://200.1.1.9:7051/ime-cloud/rest/GOOGLETCYXSJS202301P/wmts",
        layer: "GOOGLETCYXSJS202301P",
        style: "default",
        format: "image/jpgpng",
        tileMatrixSetID: "1",
        tilingScheme: new SuperMap3D.GeographicTilingScheme(),
        tileMatrixLabels: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
        ],
        })
    );

    //添加注记
    viewer.imageryLayers.addImageryProvider(
        new SuperMap3D.WebMapTileServiceImageryProvider({
        url: "http://200.1.1.9:8091/mapserver/all/WMTS/1.0/TDTUSJXZQ/TDTUSJXZQ",
        layer: "GOOGLETCYXSJS202301P",
        style: "default",
        format: "image/jpgpng",
        tileMatrixSetID: "1",
        tilingScheme: new SuperMap3D.GeographicTilingScheme(),
        tileMatrixLabels: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
        ],
        })
    );
    //初始化时飞入
    viewer.scene.camera.flyTo({
        destination: new SuperMap3D.Cartesian3.fromDegrees(
        112.986827,
        28.231044,
        50000
        ),
        orientation: {
        heading: 0,
        pitch: SuperMap3D.Math.toRadians(-90),
        roll: 0,
        },
        duration: 3,
    });
    };

    const backMap=()=>{
        router.push('/map');
    }
  </script>
  
  <style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  
    #mapContent {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .timeBlock{
        position: absolute;
        left: 20px;
        bottom: 20px;
        width: 400px;
        height: calc(100% - 100px);
        background: #10202ecc;
        // border-radius: 10px;
        padding: 10px;

        .timeBlock_top{
            display: block;
            height: 2px;
            width: 100%;
            background: #3e5273;
            .diss_left {
                width: 10px;
                height: 2px;
                opacity: 1;
                background: #65a2ffcc;
                float: left;
            }
            .diss_right {
                width: 10px;
                height: 2px;
                opacity: 1;
                background: #65a2ffcc;
                float: right;
            }
        }
        .timeBlock-content {
            // display: flex;
            align-items: center;
            justify-content: space-between;
            height: 36px;
            font-weight: 700;
            font-family: '微软雅黑';
            background: #65a2ff1a;

            padding-left: 12px;
            padding-right: 12px;
            font-size: 16px;
            color: #ffffff;
            .content_title {
                padding: 6px 0;
                width: 300px;
                float: left;
                font-size: 16px;
            }
            .content_img{
                width: 18px;
                height: 18px;
                margin-top: 10px;
                margin-right: 2px;
                float: left;
            }
        }
        .timeBlock-bottom {
            display: block;
            width: 182px;
            height: 2px;
            opacity: 1;
            background: linear-gradient(270deg, #1a8adb00 0%, #58b9ff 56.00000000000001%, #1a8adb00 100%);
        }
        .timeBlock_body{
            width: 100%;
            height: calc(100% - 50px);
            margin-top: 10px;
            overflow-y: scroll;
            overflow-x: hidden;

            &::-webkit-scrollbar {
                width: 8px;
                
            }
            &::-webkit-scrollbar-thumb {
                background-color: #3e5273a8;
                border-radius: 5px;
            }
        }
    }

    .back{
        position: absolute;
        width: 50px;
        height: 30px;
        top: 70px;
        right: 20px;
        background: #10202ecc;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;        
        border-radius: 8px;
        cursor: pointer;
        color: #ffffff;
        font-size: 12px;

        span{
            margin-left: 5px;
        }
    }
    .back:hover{
        color: #016EAB;
    }

  }
  </style>
  